<script setup>
import {ref, computed, onMounted} from "vue"
import colors from "../Data/colors.js"

const props = defineProps({
    elem: {
        type: Object,
        default: () => {
            return {
                children: [],
                styleConfig: {},
            }
        }
    }
})
const formType = ref("style")
const edit = ref(false)
const justifyContentLabel = computed(() => {
    if (props.elem.styleConfig.flexDirection === "row") return "横向对齐方式"
    if (props.elem.styleConfig.flexDirection === "column") return "纵向对齐方式"
    return "主轴对齐方式"
})
const alignItemsLabel = computed(() => {
    if (props.elem.styleConfig.flexDirection === "row") return "纵向对齐方式"
    if (props.elem.styleConfig.flexDirection === "column") return "横向对齐方式"
    return "副轴对齐方式"
})

</script>

<template>
    <div class="Flex1 print-template-element-form-container ">
        <el-radio-group v-model="formType" size="small">
            <el-radio-button value="style">样式</el-radio-button>
        </el-radio-group>
        <el-divider style="margin: 10px 0"></el-divider>
        <!--样式表单-->
        <el-form v-if="formType==='style'" :model="elem.styleConfig" class="form" label-position="left" label-width="auto" size="small">
            <div class="node-name" @dblclick="edit = true">
                <el-input v-if="edit" v-model="elem.name" autofocus @blur="edit = false" @keydown="e => e.code === 'Enter' ? edit = false : ''" />
                <span v-else style="font-size: 20px">{{ elem.name }}</span>
            </div>
            <el-form-item label="布局方向">
                <el-radio-group v-model="elem.styleConfig.flexDirection">
                    <el-radio value="row">横向</el-radio>
                    <el-radio value="column">纵向</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item :label="justifyContentLabel">
                <el-select v-model="elem.styleConfig.justifyContent" filterable style="width: 100%">
                    <el-option label="开始对齐" value="flex-start" />
                    <el-option label="居中对齐" value="center" />
                    <el-option label="末尾对齐" value="flex-end" />
                    <el-option label="两端对齐" value="space-between" />
                    <el-option label="平均分布" value="space-around" />
                </el-select>
            </el-form-item>
            <el-form-item :label="alignItemsLabel">
                <el-select v-model="elem.styleConfig.alignItems" filterable style="width: 100%">
                    <el-option label="开始对齐" value="flex-start" />
                    <el-option label="居中对齐" value="center" />
                    <el-option label="末尾对齐" value="flex-end" />
                </el-select>
            </el-form-item>
            <el-form-item label="宽">
                <el-input v-model="elem.styleConfig.width" />
            </el-form-item>
            <el-form-item label="高">
                <el-input v-model="elem.styleConfig.height" />
            </el-form-item>
            <el-form-item label="内边距">
                <el-input v-model="elem.styleConfig.padding" />
            </el-form-item>
            <el-form-item label="背景颜色">
                <el-color-picker v-model="elem.styleConfig.backgroundColor" :predefine="colors" show-alpha />
            </el-form-item>
            <FCssStyle :css-style="elem.styleConfig" @use="sty => elem.styleConfig = sty"/>
        </el-form>
    </div>
</template>

<style lang="scss" scoped>

</style>